<template>
  <div class="app-container">
    <el-dialog title="商业险续保" :visible="opensy" :before-close="cancelsy" width="1200px" destroy-on-close append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-card class="box-card" style="margin:5px;">
          <el-row :gutter="50">
            <el-form-item label="车牌号" prop="carPlateNo">
              <el-input v-model="carPlateNo" readonly class="el-input-style"/>
            </el-form-item>
          </el-row>
          <el-divider></el-divider>
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1">
              <template slot="title">
                <MmvTitle title="历史保单"></MmvTitle>
              </template>
          <!----------历史保单---------->
          <el-row :gutter="10" v-if="oldForm.syNo">
            <!--                <el-col :span="6" style="text-align: center;margin-top: 50px;">-->
            <!--                  <el-image :src="getImgUrl(oldForm.syPolicy)"-->
            <!--                            :preview-src-list="[getImgUrl(oldForm.syPolicy)]"-->
            <!--                            style="width:80%;margin-right:15px;" fit="contain"></el-image>-->
            <!--                </el-col>-->
            <!--                <el-col :span="18" style="text-align: center;margin-top: 50px;">-->
            <el-descriptions class="margin-top margin-bottom" :column="1" border>
              <el-descriptions-item label-class-name="my-descriptions-label" >
                <template slot="label"> 保险公司</template>
                {{ oldForm.syCompany }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" >
                <template slot="label"> 保单号</template>
                {{ oldForm.syNo }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" >
                <template slot="label"> 总保费</template>
                {{ oldForm.syPremium }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" >
                <template slot="label"> 开始日期</template>
                {{ oldForm.syStartTime }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" >
                <template slot="label"> 截止日期</template>
                {{ oldForm.syEndTime }}
              </el-descriptions-item>
            </el-descriptions>
            <!--                </el-col>-->
          </el-row>
          <el-empty v-else description="暂未投保"></el-empty>
          <el-divider></el-divider>
            </el-collapse-item>
            <el-collapse-item name="2">
              <template slot="title">
                <MmvTitle title="续保"></MmvTitle>
              </template>
          <!----------续保保单---------->
          <el-row :gutter="5">
            <el-col :span="12">
              <div prop="syPolicy">
                <el-tooltip effect="dark" content="请上传保单" placement="top-end">
                  <div style="margin-top: 50px;text-align: center">
                    <!--                        <imageUpload v-model="form.syPolicy" ref="imageUpload3" v-bind:isShowTip="upload.isShowChildTip"-->
                    <!--                                     v-bind:limit="upload.limit" @success="postBxd()"/>-->
                    <el-upload ref="uploadPdf" :limit="1" accept=".pdf,.jpg" :headers="uploadPdf.headers"
                               :action="uploadPdf.url + '?updateSupport=' + uploadPdf.updateSupport"
                               :disabled="uploadPdf.isUploading" :on-progress="handleFileUploadProgress"
                               :on-success="handleFileSuccess" :auto-upload="true" drag>
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                      <div class="el-upload__tip text-center" slot="tip">
                        <span>仅允许导入 pdf 或 jpg 格式文件。</span>
                      </div>
                    </el-upload>
                  </div>
                </el-tooltip>
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="保险公司" prop="compulsoryCompany">
                <el-input v-model="form.compulsoryCompany" maxlength="8" placeholder="请输保险公司"
                          class="el-input-style"/>
              </el-form-item>
              <el-form-item label="保单号" prop="compulsoryNo">
                <el-input v-model="form.compulsoryNo" placeholder="请输入保单号" class="el-input-style"/>
              </el-form-item>
              <el-form-item label="总保费" prop="compulsoryAmount">
                <el-input v-model="form.compulsoryAmount" placeholder="请输入总保费" class="el-input-style"/>
              </el-form-item>
              <el-form-item label="开始日期" prop="compulsoryStartTime">
                <el-date-picker clearable size="small" v-model="form.compulsoryStartTime" type="date"
                                format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                placeholder="请选择保险开始日期" class="el-input-style"></el-date-picker>
              </el-form-item>
              <el-form-item label="截止日期" prop="compulsoryEndTime">
                <el-date-picker clearable size="small" v-model="form.compulsoryEndTime" type="date"
                                format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                placeholder="请选择保险开始日期" class="el-input-style"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitform" :loading="loadingBtn">确 定</el-button>
        <el-button @click="cancelsy">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {getInsuranceByCarId, postBxd} from "@/api/car/car_basic";
import {addSyInsurance} from "@/api/maintenance/insurance";
import {getToken} from "@/utils/auth";
import MmvTitle from '@/components/MmvUI/MmvTitle.vue';

export default {
  components: {
    MmvTitle,
  },
  name: "MmvSy",
  props: {
    carId: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    carPlateNo: {
      type: String,
      default: ''
    },
    opensy: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      activeNames: [ '2'],
      loadingBtn: false,
      upload: {
        title: "",
        fileSize: 5,
        limit: 1,
        isShowChildTip: false,
        isShowParentTip: true,
      },
      uploadPdf: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken()
        },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/car/basic/postBxdPdf"
        // url: process.env.VUE_APP_BASE_API + "/maintenance/repair/import"
      },
      oldForm: {},
      form: {
        carId: this.carId,
        syPolicy: null,
        compulsoryCompany:null,
        compulsoryNo:null,
        compulsoryAmount:null,
        compulsoryStartTime:null,
        compulsoryEndTime:null,
      },
      rules: {
        compulsoryCompany: [{required: true, message: "保险公司必填", trigger: 'blur'}],
        compulsoryNo: [{required: true, message: "保单号必填", trigger: 'blur'}],
        compulsoryAmount: [{required: true, message: "费用必填", trigger: 'focus'}],
        compulsoryStartTime: [{required: true, message: "时间必填", trigger: 'blur'}],
        compulsoryEndTime: [{required: true, message: "时间必填", trigger: 'blur'}],

      }
    };
  },
  computed: {},
  created() {
    getInsuranceByCarId(this.carId).then(response => {
      this.oldForm = response.data;
    });
  },
  mounted() {
  },
  methods: {
    cancelsy() {
      this.$emit("close")
    },
    postBxd() {
      this.$modal.loading("识别中...")
      postBxd({url: this.form.syPolicy}).then(res => {
        this.form.compulsoryNo = res.data.policyNo;//保单号
        this.form.compulsoryAmount = res.data.premium;//保费
        this.form.compulsoryCompany = res.data.companyName;//保险公司名称
        this.form.compulsoryStartTime = res.data.policyStartDate;//发动机号码
        this.form.compulsoryEndTime = res.data.policyEndDate;//行驶证注册日期
      }).finally(err => {
        this.$modal.closeLoading()
      })

    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.uploadPdf.isUploading = true;
      this.$modal.loading("识别中...")
    },
    // 文件上传成功处理
    handleFileSuccess(res, file, fileList) {
      this.uploadPdf.isUploading = false;
      this.$modal.closeLoading();
      this.$refs.uploadPdf.clearFiles();
      this.$alert(res.msg, "识别结果", {
        dangerouslyUseHTMLString: true
      });

      this.form.syPolicy = res.data.url;//保单地址
      this.form.compulsoryNo = res.data.policyNo;//保单号
      this.form.compulsoryAmount = res.data.premium;//保费
      this.form.compulsoryCompany = res.data.companyName;//保险公司名称
      this.form.compulsoryStartTime = res.data.policyStartDate;//发动机号码
      this.form.compulsoryEndTime = res.data.policyEndDate;//行驶证注册日期
    },
    async submitform() {
      this.loadingBtn = true;
      setTimeout(() => {
        this.loadingBtn = false;
      }, 2e3);
      this.$refs["form"]?.validate(valid => {
        if (valid) {
          this.form.commercialTotalAmount = parseFloat(this.form.compulsoryAmount), // 保险费用
            this.form.urlList=[this.form.syPolicy]
            addSyInsurance(this.form).then(response => {
              this.$modal.msgSuccess("商业险续保成功");
              this.$emit("close")
            });
        }
      });
    },
  }
}
</script>
<style scoped="scoped">
.el-input-style {
  width: 260px;
}

</style>
